<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import { Page } from '@vben/common-ui';

import { consumerDetail } from '#/api/iot/relay/consumerGroup/index';

import AttrinfoCard from './attrinfoCard.vue';
import BaseInfoCard from './baseInfoCard.vue';

const detailInfo = ref(null);
const route = useRoute();

onMounted(() => {
  consumerDetail(route.params.id).then((res) => {
    detailInfo.value = res;
  });
});
</script>

<template>
  <Page :auto-content-height="true">
    <div class="space-y-4" v-if="detailInfo">
      <BaseInfoCard :detail-info="detailInfo" />
      <AttrinfoCard :device="detailInfo" />
    </div>
  </Page>
</template>
